import React, { Component } from 'react'
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

export default class App extends Component {
    state = {
        list:[]
    }
    componentDidMount(){
      setTimeout(()=>{
        this.setState({
            list:['111','222','333']
        },()=>{
            new Swiper('.swiper',{
                pagination: {
                    el: '.swiper-pagination',
                  },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        })
      }, 1000)
  }
  render() {
    return (
     <div className="swiper" style={{height:'200px'}}>
        <div className="swiper-wrapper">
            {this.state.list.map(item =>
                <div key={item} className="swiper-slide">{item}</div>
            )}
        </div>
        <div className="swiper-pagination"></div>
        <div className="swiper-button-prev"></div>
        <div className="swiper-button-next"></div>
     </div>
    )
  }
}
